﻿
@{
    ViewData["Title"] = "ExecutionGrid";
}
@* 执行网格 *@

<div>

    <table>

        <tr>
            <td>

                &emsp;
            </td>
            <td>
                <br />
                <div style="height:20px; background-color:lightblue; font-weight:bold; color:black; padding:10px;">待办事件</div>
                <br />
                <table id="ID-table-demo-setRowChecked" style="width:700px;"></table>
                <div id="pagesbox"></div>
            </td>
            <td>
                &emsp;
            </td>
            <td>
                <br />
                <div style="height:20px; background-color:lightblue; font-weight:bold; color:black; padding:10px;">工作量统计</div>
                <br />
                <div id="Cromain" style="width: 500px;height:400px;"></div>

            </td>
        </tr>
        <tr>
            <td>
            </td>
            <td>
            </td>
        </tr>
    </table>

</div>
<script src="~/layui/jquery-3.3.1.js"></script>
<script src="~/echarts.min.js"></script> 

 <<script>



      layui.use(['table', 'laypage', 'layer', 'form'], function () {
          var table = layui.table;
          var laypage = layui.laypage;
          var $ = layui.jquery;
          var form = layui.form;
          var layer = layui.layer; // 添加layui弹出层模块
      });
      var $ = layui.jquery;
      var laypage = layui.laypage;



      Crooption = {
          xAxis: {
              max: 'dataMax'
          },
          yAxis: {
              type: 'category',
              data: ['挂起', '督办', '超期', '结案', '立案', '受理'],
              inverse: true,
              animationDuration: 300,
              animationDurationUpdate: 300,
              // max: 2 // only the largest 3 bars will be displayed
          },
          series: [
              {
                  realtimeSort: true,

                  type: 'bar',
                  data: [40, 31, 21, 15, 10, 5],
                  label: {
                      show: true,
                      position: 'right',
                      valueAnimation: true
                  },
                  itemStyle: {
                      color: function (params) {
                          // 定义一个颜色数组
                          let colors = ['#4CAF50', '#2196F3', '#FF9800', '#00BCD4', '#F44336', '#9C27B0', '#E91E63'];
                          return colors[params.dataIndex % colors.length];
                      }
                  }
              }
          ],
          legend: {
              show: true
          },
          animationDuration: 0,
          animationDurationUpdate: 3000,
          animationEasing: 'linear',
          animationEasingUpdate: 'linear'
      };

      var CormyChart = echarts.init(document.getElementById('Cromain'));
      CormyChart.setOption(Crooption);

      var pageSize = 8; // 每页显示条数
      function GetDataList(pageIndex) {
          $.ajax({
              url: 'http://8.140.245.229:8000/WorkBenchRead/api/LOG/GetPE',
              type: 'get',
              dataType: 'json',
              //参数
              data: {
                  PageIndex: pageIndex,
                  PageSize: pageSize
              },
              success: function (res) {
                  //渲染表格数据
                  layui.use(['table'], function () {
                      var table = layui.table;
                      table.render({
                          //挂载的表格id
                          elem: '#ID-table-demo-setRowChecked',
                          cols: [[
                              { type: 'numbers', title: '序号', width: 120, align: 'center' },
                              { field: 'EventDesc', title: '事件描述', width: 120, align: 'center' },
                              {
                                  field: 'EventLevel', title: '事件级别', width: 120, align: 'center',
                                  templet: function (d) {
                                      if (d.EventLevel == 1) {
                                          return '<span>一般</span>'
                                      } else if (d.EventLevel == 2) {
                                          return '<span>紧急</span>'
                                      }
                                  }
                              },
                              {
                                  field: 'ReportDate', title: '上报时间', width: 120, align: 'center',
                                  templet: function (data) { return data.ReportDate.substring(0, 16).replace("T", " ") }
                              },
                              {
                                  field: 'ArriveDate', title: '到达时间', width: 120, align: 'center',
                                  templet: function (data) { return data.ArriveDate.substring(0, 16).replace("T", " ") }
                              },
                              {
                                  field: 'EndTime', title: '处理截止时间', width: 120, align: 'center',
                                  templet: function (data) { return data.EndTime.substring(0, 16).replace("T", " ") }
                              },
                              {
                                  field: 'WarningState', title: '预警状态', width: 120, align: 'center',
                                  templet: function (d) {
                                      if (d.WarningState == 1) {
                                          return '<i class="layui-icon layui-icon-circle-dot" style="font-size: 20px; color: #16b777;"></i>'
                                      } else if (d.WarningState == 2) {
                                          return '<i class="layui-icon layui-icon-circle-dot" style="font-size: 20px; color: #ff5722"></i>'
                                      }
                                  }
                              },
                              {
                                  field: 'NodeTypeEnum', title: '当前节点', width: 120, align: 'center', templet: function (d) {
                                      if (d.NodeTypeEnum == 1) {
                                          return '<span>立案审核</span>'
                                      } else if (d.NodeTypeEnum == 2) {
                                          return '<span>现场核实</span>'
                                      } else if (d.NodeTypeEnum == 3) {
                                          return '<span>案件核查</span>'
                                      } else if (d.NodeTypeEnum == 4) {
                                          return '<span>案件处置</span>'
                                      }
                                  }
                              },
                              { title: '操作', width: 120, align: 'center', templet: '#barDemo', fixed: 'right', unresize: true },
                          ]],
                          data: res.list
                      })
                      laypage.render({
                          //挂载的分页id
                          elem: 'pagesbox',
                          count: res.TotalCount,
                          limit: pageSize,
                          curr: pageIndex,
                          layout: ['count', 'prev', 'page', 'next', 'skip'],
                          jump: function (obj, first) {
                              if (!first) {
                                  GetDataList(obj.curr);
                              }
                          }
                      });
                  })
              }
          })
      }

      $(function () {
          GetDataList(1);
      })

 </script>
<script type="text/html" id="barDemo">
    <div class="layui-btn-container">
        <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit">处理</i></a>
    </div>
</script>

